<!-- BookManagement.vue -->
<template>
  <div>
    <el-table
      :data="books"
      style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="Title"></el-table-column>
      <el-table-column prop="author" label="Author"></el-table-column>
      <el-table-column prop="copies" label="Copies"></el-table-column>
    </el-table>
    <el-button @click="showAddDialog">Add Book</el-button>
    <el-button type="danger" @click="showDeleteConfirmation">Delete Book</el-button>
    <el-dialog
      title="Add Book"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form label-position="top">
        <el-form-item label="ID">
          <el-input v-model="newBook.id"></el-input>
        </el-form-item>
        <el-form-item label="Title">
          <el-input v-model="newBook.title"></el-input>
        </el-form-item>
        <el-form-item label="Author">
          <el-input v-model="newBook.author"></el-input>
        </el-form-item>
        <el-form-item label="Copies">
          <el-input v-model="newBook.copies"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleAddBook">Add</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="Confirm Delete"
      :visible.sync="deleteDialogVisible"
      width="30%">
      <p>Enter the ID of the book you want to delete:</p>
      <el-input v-model="deleteBookId"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="confirmDeleteBook">Delete</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
      {"id": 1, "title": "Python编程", "author": "John Doe", "copies": 4},
  {"id": 2, "title": "历史的秘密", "author": "Jane Smith", "copies": 3},
  {"id": 3, "title": "宇宙探索", "author": "Emily Brown", "copies": 2},
  {"id": 4, "title": "健康生活", "author": "Mike Johnson", "copies": 5},
  {"id": 5, "title": "数学之美", "author": "Sarah Lee", "copies": 4},

        // Other book data
      ],
      dialogVisible: false,
      deleteDialogVisible: false,
      deleteBookId: "",
      newBook: {
        id: "",
        title: "",
        author: "",
        copies: "",
      },
    };
  },
  methods: {
    handleDelete(index) {
      this.books.splice(index, 1);
    },
    showAddDialog() {
      this.dialogVisible = true;
    },
    handleAddBook() {
  const id = parseInt(this.newBook.id);
  const existingBook = this.books.find((book) => book.id === id);
  if (existingBook) {
    // Show error message that the book with the same ID already exists
  } else {
    this.books.push({ id: id, title: this.newBook.title, author: this.newBook.author });
    this.newBook = { id: "", title: "", author: "" };
    this.addDialogVisible = false;
  }
},
    showDeleteConfirmation() {
      this.deleteDialogVisible = true;
    },
    confirmDeleteBook() {
  const id = parseInt(this.deleteBookId);
  const index = this.books.findIndex((book) => book.id === id);
  if (index !== -1) {
    this.books.splice(index, 1);
    this.deleteDialogVisible = false;
    this.deleteBookId = "";
  } else {
    // Show error message that the book with the specified ID does not exist
  }
},
  },
};
</script>